<template>
  <div class="views">
    <header>
      <div @click="goLogin()">＜返回</div>
    </header>
    <div class="content">
      <h3>账号登录</h3>
      <div class="input-border">
        <img src="./image/man.png" />
        <input
          v-model="loginForm.username"
          type="text"
          placeholder="请输入用户名"
        />
      </div>
      <div class="input-border">
        <img src="./image/suo.png" />
        <input
          type="password"
          v-model="loginForm.passwd"
          placeholder="请输入登录密码"
        />
      </div>
      <div class="confirm">
        <div @click="login" class="confirm-btn">登录</div>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../../API/http.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        passwd: ""
      }
    };
  },
  methods: {
    goLogin() {
      this.$router.go(-1);
    },
    ...mapMutations(["changeLogin"]),
    async login() {
      // let _this = this;
      if (this.loginForm.username === "" || this.loginForm.passwd === "") {
        alert("账号或密码不能为空");
      } else {
        console.log(http);
        const { data } = await http._login({
          username: this.loginForm.username,
          password: this.loginForm.passwd
        });
        console.log(data);
        let { datas, status, msg } = data;
        if (status) {
          alert(msg);
        } else {
          this.changeLogin({ Authorization: datas.username, id: datas._id });
          // console.log(datas.username);
          // console.log(datas._id);
          this.$router.push("/Community");
          this.$store.commit("setindex", 0);
        }
      }
    }
  }
};
</script>
<style scoped>
.views {
  width: 100%;
  background-color: white;
}

/* 页首 */
header {
  width: 100%;
  height: 64px;
  background-color: #2d2d2d;
  color: white;
}

header div {
  line-height: 64px;
  margin-left: 32px;
}

/* 内容 */
.content {
  text-align: center;
  position: relative;
  top: 34px;
}

.input-border {
  width: 260px;
  margin-top: 18px;
  border-bottom: 1px solid black;
  display: flex;
  flex-flow: row;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-bottom: 6px;
}

.input-border img {
  width: 20px;
  height: 20px;
}

.content .input-border input {
  border: 0;
  font-size: 16px;
  outline: none;
  color: black;
}

.confirm {
  margin-top: 34px;
  width: 260px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.confirm .confirm-btn {
  color: white;
  width: 260px;
  height: 40px;
  background-color: #01a0f3;
  line-height: 40px;
}

/* 设置各个游览器input默认文字颜色和字体 */
::-webkit-input-placeholder {
  font-size: 12px;
  color: #cccccc;
}

::-moz-placeholder {
  font-size: 12px;
  color: #cccccc;
}

:-ms-input-placeholder {
  font-size: 12px;
  color: #cccccc;
}
</style>
